<template>
  <scroll-view
    enable-back-to-top
    scroll-y
    class="customer"
    :refresher-triggered="isTriggered"
    @refresherrefresh="onRefresherrefresh"
    @scrolltolower="getCustomerData"
  >
    <view style="margin-top: 20rpx" v-for="(row, index) in contactList" :key="index">
      <view style="border: 1rpx solid #d7d7d7; border-radius: 5rpx; padding: 20rpx">
        <up-row>
          <up-col span="8">
            <view style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis">{{
              row.name
            }}</view>
          </up-col>
          <up-col span="4">
            <up-row v-if="row?.loginData">
              <up-col span="6">
                <view style="color: #3775cb" @click="handleEdit(row)">编辑</view>
              </up-col>
              <up-col span="6">
                <view style="text-align: right; color: red" @click="handleRemove(row)"> 删除 </view>
                <u-modal
                  :show="showRemoveConfirm"
                  @confirm="handleConfirmRemove"
                  ref="uModal"
                  :asyncClose="true"
                ></u-modal>
              </up-col>
            </up-row>
          </up-col>
        </up-row>
        <view>
          {{ row?.contactWayLabel }}
        </view>
        <rich-text :nodes="row?.address"></rich-text>
      </view>
    </view>
    <u-empty v-show="isFinish && contactList.length === 0" mode="history" />
    <u-loadmore v-if="isLoading" status="loading" />
    <u-loadmore v-if="isFinish && contactList.length > 0" status="nomore" />
    <view
      @click="openAdd"
      style="
        position: fixed;
        width: 80rpx;
        height: 80rpx;
        background-color: rgba(55, 117, 203, 0.47);
        bottom: 350rpx;
        right: 0;
        border-radius: 50rpx 0 0 50rpx;
        padding: 12rpx 15rpx;
      "
    >
      <u-icon name="plus-circle" color="#3775cb" size="30"></u-icon>
    </view>
  </scroll-view>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { deleteContactAPI, getContactListAPI } from '@/services/contact'
import { getFollowRecordListAPI } from '@/services/followRecord'

const props = defineProps<{
  customerId: string
}>()
// 请求参数
const queryParams = ref<any>({
  customerId: props.customerId,
  pageNum: 1,
  pageSize: 10,
})
const showRemoveConfirm = ref(false)
const isFinish = ref(false)
// 是否触发下拉刷新
const isTriggered = ref(false)
// 获取订单列表
const contactList = ref<any[]>([])
// 是否加载中标记，用于防止滚动触底触发多次请求
const isLoading = ref(false)
// 自定义下拉刷新被触发
const onRefresherrefresh = async () => {
  // 开始动画
  isTriggered.value = true
  // 重置数据
  queryParams.value.page = 1
  contactList.value = []
  isFinish.value = false
  // 加载数据
  await getCustomerData()
  // 关闭动画
  isTriggered.value = false
}
const getCustomerData = async () => {
  // 如果数据出于加载中，退出函数
  if (isLoading.value) return
  // 退出分页判断
  if (isFinish.value === true) {
    return
  }
  // 发送请求前，标记为加载中
  isLoading.value = true
  // 发送请求
  const res = await getContactListAPI(queryParams.value)
  // 发送请求后，重置标记
  isLoading.value = false
  // 数组追加
  contactList.value.push(...res.rows)
  // 分页条件
  if (contactList.value.length < res.total) {
    // 页码累加
    queryParams.value.pageNum++
  } else {
    // 分页已结束
    isFinish.value = true
  }
}
const openAdd = async () => {
  uni.navigateTo({
    url:
      '/pagesCustomer/contact/contactForm?fromPage=customerDetails&customerId=' + props.customerId,
  })
}

const handleEdit = async (row: any) => {
  uni.navigateTo({
    url:
      '/pagesCustomer/contact/contactForm?fromPage=customerDetails&customerId=' +
      props.customerId +
      '&contactId=' +
      row?.contactId,
  })
}

const handleRemove = async (row: any) => {
  uni.showModal({
    content: '是否删除',
    confirmColor: '#e51010',
    success: async (res) => {
      if (res.confirm) {
        await deleteContactAPI(row.contactId)
        contactList.value = contactList.value.filter((item) => item?.contactId !== row.contactId)
      }
    },
  })
}

const handleConfirmRemove = async (row: any) => {}

// 组件挂载完毕
onMounted(() => {
  getCustomerData()
})

const refreshContactList = async (query: any) => {
  let total: number
  let list: any[]
  if (query.contactId) {
    const res = await getContactListAPI({
      contactId: query.contactId,
      pageNum: 1,
      pageSize: 1,
    })
    total = res.total
    list = []
    for (const j in contactList.value) {
      let item: any = contactList.value[j]
      for (const i in res.rows) {
        if (contactList.value[j]['contactId'] === res.rows[i]['contactId']) {
          item = res.rows[i]
        }
      }
      list.push(item)
    }
  } else {
    list = JSON.parse(JSON.stringify(contactList.value))
    const res = await getContactListAPI(queryParams.value)
    total = res.total
    for (const j in res.rows) {
      let inD = false
      for (const i in contactList.value) {
        if (contactList.value[i]['contactId'] === res.rows[j]['contactId']) {
          inD = true
        }
      }
      if (!inD) {
        list.push(res.rows[j])
      }
    }
  }
  contactList.value = JSON.parse(JSON.stringify(list))
  if (contactList.value.length < total) {
    isFinish.value = false
  }
}

// 暴露
defineExpose({
  refreshContactList,
})
</script>

<style scoped lang="scss"></style>
